import PageHeader from '@/components/PageHeader';
import Filter from '@/pages/OperationCenter/OrderManage/components/Filter';
import { orderList } from './services';
import { Card, Field, ResponsiveGrid } from '@alifd/next';
import { useFusionTable } from 'ahooks';
import List from './components/List';

function OrderManage() {
  const field = Field.useField([]);

  const { paginationProps, tableProps, search, error, refresh } = useFusionTable(orderList, {
    field,
  });
  const { submit, reset } = search;

  return (
    <ResponsiveGrid gap={20}>
      <ResponsiveGrid.Cell colSpan={12}>
        <PageHeader title="订单管理" breadcrumbs={[{ name: '运营中心' }, { name: '订单管理' }]} />
      </ResponsiveGrid.Cell>
      <ResponsiveGrid.Cell colSpan={12}>
        <Card free>
          <Filter submit={submit} reset={reset} field={field} />
          <List pagination={paginationProps} tableProps={tableProps} error={error} onRefresh={refresh} />
        </Card>
      </ResponsiveGrid.Cell>
    </ResponsiveGrid>
  );
}

export default OrderManage;
